<template>
  <div class="weui-panel full scroll-h" style="background: #fff">
    <div v-show="canApply" class="weui-msg">
      <div class="weui-msg__text-area">
        <h2 class="text-center weui-msg__title">请填写邀请码</h2>
      </div>
      <div class="weui-cell weui-flex">
        <!-- <div class="weui-flex__item"> 
          <label class="weui-label">邀请人ID</label>
        </div> -->
        <div class="weui-flex__item">
          <div style="width: 70%; margin: 0 auto;">
            <input ref="uppperID" class="weui-input input-style" v-model="upperAgentID" @keydown.enter="queryUpperAgent" 
            type="text" autofocus="autofocus" maxlength="6" placeholder="请输入邀请码">
          </div>
        </div>
      </div>
      <div v-if="showQuery" class="weui-flex__item" style="flex-basis: 100%;"><a style="width: 68%;" class="weui-btn weui-btn_normal weui-btn_primary" @click="queryUpperAgent">查询</a></div>

      <div class="text-center" v-if="upperAgentRes.queriedSuc">
        <img class="list-user-img" :src="upperAgentRes.data.headurl" alt="">
        <div style="line-height: 50px;font-size: 20px;">{{upperAgentRes.data.nickname}}</div> 
      </div>
      <div class="weui-msg__opr-area" v-if="upperAgentRes.queriedSuc">
        <p class="weui-btn-area">
          <a @click="nextStep" class="weui-btn weui-btn_primary">下一步</a>
        </p>
      </div>
      <div class="weui-flex" v-show="upperAgentRes.queryError">
        <div class="weui-flex__item" style="text-align: center;">
          {{upperAgentRes.message}}
        </div>
      </div>
    </div>

    <div v-show="myInfo.loaded && myInfo.isAgentAlready" class="weui-msg">
      <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">您已经是代理了</h2>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <router-link :to="{name: 'Instruct'}" class="weui-btn weui-btn_default">查看代理介绍</router-link>
        </p>
      </div>
      <div class="weui-msg__extra-area">
        <div class="weui-footer">
          <p class="weui-footer__text">乐翻天@2017</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions, mapState} from 'Vuex'
export default {
  data() {
    return {
      upperAgentID: '',
      showQuery: true
    }
  },
  mounted() {
  },
  activated() {
    this.$refs.uppperID.focus()
  },
  methods: {
    ...mapActions(['queryUpper']),
    queryUpperAgent() {
      const pattern = /^[0-9]*$/
      if (this.upperAgentID.length !== 6 || !pattern.test(this.upperAgentID)) {
        $.alert('上级代理ID是一个6位数的数字');
        return
      }
      const send = {
        upperAgentID: this.upperAgentID
      }
      this.queryUpper(send).then(()=>{
        this.showQuery = false
      })
    },
    nextStep() {
      $.confirm(`确认邀请人昵称: ${this.upperAgentRes.data.nickname} `, () => {
        window.btn_sound.play();
        this.$router.push({name: 'Step2Info'})
      })
    }
  },
  computed: {
    ...mapState(['upperAgentInfo', 'upperAgentRes', 'myInfo']),
    canApply() {
      return this.myInfo.loaded && !this.myInfo.isAgentAlready
    }
  },
  components: {}
}
</script>

<style lang="less">
.input-style {
  height: 2.2rem;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #d7d7d7;
}
</style>